<template>
  <div class="ele-body">
    <el-card shadow="never">
      <!-- 搜索表单 -->
      <el-form
        :model="where"
        label-width="77px"
        class="ele-form-search"
        @keyup.enter.native="reload"
        @submit.native.prevent>
        <el-row :gutter="15">
          <el-col :lg="4" :md="12">
            <span>订单号:</span>
            <el-input
              clearable
              style="width: 200px"
              v-model="where.order_id"
              placeholder="请输入订单号"/>
          </el-col>
          <el-col :lg="4" :md="12">
            <span>平台:</span>
            <el-select style="width: 180px" clearable filterable class="form_width" v-model="where.platform">
              <el-option v-for="(item,index) in searchInfo.platform_list" :key="index" :label="item"
                         :value="index"/>
            </el-select>
          </el-col>
          <el-col :lg="4" :md="12">
            <span>Sku:</span>
            <el-input
              clearable
              style="width: 200px"
              v-model="where.platform_sku"
              placeholder="多个Sku用;隔开"/>
          </el-col>
          <el-col :lg="4" :md="12">
            <span>店铺名:</span>
            <el-select style="width: 180px" clearable filterable multiple class="form_width" v-model="where.user_account">
              <el-option v-for="(item,index) in searchInfo.account_list" :key="index" :label="item.platform_user_name"
                         :value="item.user_account"/>
            </el-select>
          </el-col>
          <el-col :lg="4" :md="12">
            <span>品牌:</span>
            <el-select style="width: 180px" clearable filterable multiple  class="form_width" v-model="where.brand">
              <el-option v-for="(item,index) in searchInfo.brand_list" :key="index" :label="item"
                         :value="item"/>
            </el-select>
          </el-col>
        </el-row>
        <br/>
        <el-row :gutter="15">
          <el-col :lg="8" :md="12">
            <span>购买时间:</span>
            <el-date-picker
              v-model="where.platformPaidDate"
              type="daterange"
              align="right"
              unlink-panels
              size="small"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-col>
          <el-col :lg="4" :md="12">
            <span>Asin:</span>
            <el-input
              clearable
              style="width: 200px"
              v-model="where.asin"
              placeholder="多个asin用;隔开"/>
          </el-col>
          <el-col :lg="4" :md="12">
            <span>分类:</span>
            <el-select style="width: 180px" clearable filterable multiple  class="form_width" v-model="where.product_category_name1">
              <el-option v-for="(item,index) in searchInfo.category_list" :key="index" :label="item.product_category_name1"
                         :value="item.product_category_name1"/>
            </el-select>
          </el-col>

          <el-col :lg="4" :md="12">
            <span>国家:</span>
            <el-select style="width: 180px" clearable filterable multiple class="form_width" v-model="where.country_code">
              <el-option v-for="(item,index) in searchInfo.country_list" :key="index" :label="item"
                         :value="index"/>
            </el-select>
          </el-col>
          <el-col :lg="4" :md="12">
            <el-button
              type="primary"
              icon="el-icon-search"
              class="ele-btn-icon"
              @click="query('1')">查询
            </el-button>
            <el-button @click="reset">重置</el-button>
          </el-col>

        </el-row>


        <div class="ele-form-actions">
        </div>
      </el-form>
      <div>
        <el-button
          size="small"
          type="danger"
          icon="el-icon-delete"
          class="ele-btn-icon"
          @click="removeBatch"
          v-if="permission.includes('sys:order:dall')">删除
        </el-button>&nbsp;&nbsp;
        <el-button
          @click="showImport=true"
          icon="el-icon-upload2"
          class="ele-btn-icon"
          size="small">导入Amazon订单
        </el-button>&nbsp;&nbsp;
        <el-button
          @click="showEccangImport=true"
          icon="el-icon-upload2"
          class="ele-btn-icon"
          size="small">易仓订单导入
        </el-button>&nbsp;&nbsp;
      </div>
      <br>
      <el-table ref="table" :data="data" v-loading="loading"  row-key="id" border
                height="calc(100vh - 320px)" highlight-current-row lazy
                @selection-change="handleSelectionChange"
                :load="load">
        <el-table-column
          type="selection"
          align="center"
          width="55">
        </el-table-column>
        <el-table-column label="" prop="platform_paid_date" type="expand" show-overflow-tooltip min-width="200">
          <template slot-scope="{row}" type="selection">
            <el-form label-position="left" inline class="demo-table-expand">

              <el-form-item label="Brand(品牌)">
                <span>{{ row.brand_code}}</span>
              </el-form-item>
              <el-form-item label="sku">
                <span>{{ row.platform_sku}}</span>
              </el-form-item>
              <el-form-item label="Seller Account(店铺名)">
                <span>{{ row.user_account}}</span>
              </el-form-item>
              <el-form-item label="产品名称">
                <el-tooltip class="item" effect="dark" :content="row.product_title" placement="top">
                  <div style="width: 300px" class="info-title">{{row.product_title}}</div>
                </el-tooltip>
              </el-form-item>
              <el-form-item label="Order Total(订单金额)">
                <span>{{ row.amount_paid}}</span>
              </el-form-item>
              <el-form-item label="Product Asin">
                <span>{{ row.asin}}</span>
              </el-form-item>
              <el-form-item label="Buyer Name">
                <span>{{ row.buyer_name}}</span>
              </el-form-item>
              <el-form-item label="Shipping Address">
                <el-tooltip class="item" effect="dark" :content="row.line" placement="top">
                  <div style="width: 300px" class="info-title">{{row.line}}</div>
                </el-tooltip>
              </el-form-item>
              <el-form-item label="城市名称">
                <span>{{ row.city_name}}</span>
              </el-form-item>
              <el-form-item label="邮编">
                <span>{{ row.postal_code}}</span>
              </el-form-item>
              <el-form-item label="州或省">
                <span>{{ row.state}}</span>
              </el-form-item>
              <el-form-item label="区">
                <span>{{ row.district}}</span>
              </el-form-item>

            </el-form>
          </template>
        </el-table-column>
        <el-table-column prop="platform_paid_date" sortable label="购买时间" min-width="100" align="center"/>
        <el-table-column prop="order_id" label="订单号" min-width="100" align="center"/>
        <el-table-column prop="platform_sku" label="sku" min-width="100" align="center"/>
        <el-table-column label="产品图片" prop="pic" align="center">
          <template slot-scope="{row}" type="selection">
            <el-popover placement="top-start" trigger="click">
              <img :src="row.pic" style="width: 170px;height: 150px">
              <img slot="reference" :src="row.pic" style="width: 80px;height: 80px; cursor:pointer">
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="platform" label="平台" min-width="100" align="center"/>
        <el-table-column prop="product_category_name" label="分类" min-width="100" align="center"/>
        <el-table-column label="国家" prop="country_name" align="center">
          <template slot-scope="{row}" type="selection">
            {{row.country_name}}({{row.country_code}})
          </template>
        </el-table-column>
        <el-table-column label="店铺" prop="platform_user_name" align="center"/>

        <el-table-column label="订单总额" prop="amount_paid" align="center">
          <template slot-scope="{row}" type="selection">
            {{row.currency}} {{row.amount_paid}}
          </template>
        </el-table-column>
        <el-table-column prop="discount_val" label="折扣价" min-width="100" align="center"/>
        <el-table-column prop="create_time" sortable label="导入时间" min-width="100" align="center"/>
        <el-table-column prop="update_time" sortable label="更新时间" min-width="100" align="center"/>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 50,100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
    <!-- 导入弹窗 -->
    <order-import
      :visible.sync="showImport"
      @done="reload"/>
    <eccang-import
      :visible.sync="showEccangImport"
      :searchInfo="searchInfo"
      @done="reload"/>
  </div>
</template>



<script>
import { mapGetters } from "vuex";
import OrderImport from './order-import.vue';
import EccangImport from './eccang-import.vue';

export default {
  name: 'OrderAndCustomersOrder',
  components: { OrderImport,EccangImport},
  computed: {
    ...mapGetters(["permission"]),
  },
  data() {
    return {
      loading: true,  // 加载状态
      // 表格数据接口
      url: '/OrderAndCustomersOrder/index',
      // 表格列配置
      columns: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        },
          {
            text: '最近一年',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      // 表格搜索条件
      where: {
        page:0,
        limit:10,
        platform:'amazon',
        platformPaidDate:[],
        asin:'',
        user_account:'',
        country_code:''
      },
      // 表格选中数据
      selection: [],
      searchInfo:{},
      // 当前编辑数据
      current: null,
      // 是否显示编辑弹窗
      showEdit: false,
      // 是否显示导入弹窗
      showImport: false,
      showEccangImport: false,
      // 列表数据
      data: [],
      // 全部栏目数据
      cateList: [],
      multipleSelection: [],
      form:{},
      currentPage4: 1,
      currentPage: 1, // 当前页码
      total: 0, // 总条数
      pageSize: 10 // 每页的数据条数
    };
  },
  mounted() {
    this.getTimeFn();
    this.query();
    this.orderConfig();
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = this.where.limit = val;
      this.query();
    },
    handleCurrentChange(val) {
      this.currentPage = this.where.page = val;
      this.query();
    },
    formatter(row, column) {
      console.log(row,column)
    },
    getTimeFn() {
      const that = this;
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); //15天把7改掉
      var beg = that.formatDate(start);
      var ends = that.formatDate(end);
      this.where.platformPaidDate = [beg, ends] //将值设置给插件绑定的数据
    },
    //格式化时间
    formatDate(date) {
      var myyear = date.getFullYear();
      var mymonth = date.getMonth() + 1;
      var myweekday = date.getDate();

      if (mymonth < 10) {
        mymonth = "0" + mymonth;
      }
      if (myweekday < 10) {
        myweekday = "0" + myweekday;
      }
      return myyear + "-" + mymonth + "-" + myweekday;
    },
    //获取查询条件配置
    orderConfig() {
      this.$http.get('/OrderAndCustomersOrder/orderConfig', this.form).then((res) => {
        this.loading = false;
        if (res.data.code === 0) {
          this.searchInfo = res.data.data;
        } else {
          this.$message({type: 'error', message: res.data.msg, offset: 160});
        }
      });
    },
    /* 查询 */
    query(pageSign) {
      if (pageSign) this.currentPage = this.where.page =1;
      this.loading = true;
      this.$http.get(this.url,{params: this.where}).then(res => {
        this.loading = false;
        if (res.data.code === 0) {
          this.data = res.data.data;
          this.total = res.data.count;
        } else {
          this.$message.error(res.data.msg || '获取数据失败');
        }
      }).catch(e => {
        this.loading = false;
        this.$message.error(e.message);
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    /**
     * 异步加载数据
     */
    load(tree, treeNode, resolve) {
      this.where['pid'] = tree.id;
      this.$http.get(this.url, {params: this.where}).then(res => {
        if (res.data.code === 0) {
          resolve(res.data.data)
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    /* 刷新表格 */
    reload() {
      this.$refs.table.reload({where: this.where});
    },
    /* 重置搜索 */
    reset() {
      this.where = {};
      this.query();
    },
    /* 显示编辑 */
    openEdit(row) {
      this.current = row;
      this.showEdit = true;
    },
    /* 删除 */
    remove(row) {
      const loading = this.$loading({lock: true});
      this.$http.post('/OrderAndCustomersOrder/delete', {id: row.id}).then(res => {
        loading.close();
        if (res.data.code === 0) {
          this.$message.success(res.data.msg);
          this.query();
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        loading.close();
        this.$message.error(e.message);
      });
    },
    /* 批量删除 */
    removeBatch() {
      if (!this.multipleSelection.length) {
        this.$message.error('请至少选择一条数据');
        return;
      }
      this.$confirm('确定要删除选中的数据吗?', '提示', {
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({lock: true});
        this.$http.post('/OrderAndCustomersOrder/delete', {id: this.multipleSelection.map(d => d.id)}).then(res => {
          loading.close();
          if (res.data.code === 0) {
            this.$message.success(res.data.msg);
            this.query();
          } else {
            this.$message.error(res.data.msg);
          }
        }).catch(e => {
          loading.close();
          this.$message.error(e.message);
        });
      }).catch(() => {
      });
    },
    /* 更改状态 */
    editStatus(row) {
      const loading = this.$loading({lock: true});
      let params = Object.assign({
        "id": row.id,
        "status": row.status
      })
      this.$http.post('/OrderAndCustomersOrder/status', params).then(res => {
        loading.close();
        if (res.data.code === 0) {
          this.$message.success(res.data.msg);
        } else {
          row.status = !row.status ? 1 : 2;
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        loading.close();
        this.$message.error(e.message);
      });
    },
    /* 导出数据Excel */
    exportExcel() {
      let info = JSON.parse(JSON.stringify(this.where));
      this.$http
        .get("/OrderAndCustomersOrder/exportExcel", info)
        .then((res) => {
          let data = res.data;
          if (data.code == 0) {
            // 下载文件
            window.location.href = data.data;
            this.$message({
              type: "success",
              message: "导出成功",
            });
          } else {
            this.$message.error("导出失败");
          }
        })
    },
  }
}
</script>

<style>
.el-table--enable-row-transition .el-table__body td {
  text-align: center;
}
::v-deep .el-form-item{
  border: 1px solid #EBEEF5;
}

.demo-table-expand {
  font-size: 0;
}
.el-form--inline .el-form-item__label {
  float: left;
}
.info-title {
  width: 100%;   /*一定要设置宽度，或者元素内含的百分比*/
  overflow:hidden; /*溢出的部分隐藏*/
  white-space: nowrap; /*文本不换行*/
  text-overflow:ellipsis;/*ellipsis:文本溢出显示省略号（...）；clip：不显示省略标记（...），而是简单的裁切*/
}
.demo-table-expand label {
  font-weight: 700;
  width: 90px;
  color: #222;
  width: 180px;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
